{% extends 'front/user_info_manage/base_user_info.html' %}

{% block css %}
    {{ super() }}
{% endblock %}

{% block title %}我的信息{% endblock %}

{% block main_right %}
    <div class="col-md-9 info">
        <div class="col-md-offset-1">
            <div class="avatar left">
                <img src="{% if user.avatar %}{{ url_for('static', filename='images/avatar/'+user.avatar) }}{% endif %}" id="show"  width="125" height="150" alt="头像">
                <div class="upload-img select-img text-center"><label for="file" class='upload-select-img'>选择图片</label></div>

                <div class="upload-img upload-div"><label for="submit_img">上传</label></div>

                <form method="POST" action="{{ url_for('userinfo.inputAvatar') }}" enctype="multipart/form-data">
                    <input type="file" name="avatar" id="file" class="inputfile" onchange="changepic(this)"
                           accept="image/png, image/jpeg, image/gif, image/jpg" value="上传图片">
                    <input type="submit" id="submit_img" >
                </form>
                <script>
                    function changepic(obj) {
                        {#$('.upload-select-img').hide();#}
                        //console.log(obj.files[0]);//这里可以获取上传文件的name
                        var newsrc=getObjectURL(obj.files[0]);
                        var img = document.getElementById('show').src=newsrc;
                        $('.upload-div').show();
                    }
                    //建立一個可存取到該file的url
                    function getObjectURL(file) {
                        var url = null ;
                        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
                        if (window.createObjectURL!=undefined) { // basic
                            url = window.createObjectURL(file) ;
                        } else if (window.URL!=undefined) { // mozilla(firefox)
                            url = window.URL.createObjectURL(file) ;
                        } else if (window.webkitURL!=undefined) { // webkit or chrome
                            url = window.webkitURL.createObjectURL(file) ;
                        }
                        return url ;
                    }
                </script>
            </div>
            <div class="content ">
                <p>姓名：{% if user.name %}{{ user.name }}{% endif %}</p>
                <p>性别：{% if user.gender %}{% if user.gender == 'M' %}男{% else %}女{% endif %}{% endif %}</p>
                <p>手机号：{{ user.tel }}</p>
                <p>邮箱地址：{% if user.email %}{{ user.email }}{% endif %}</p>
                <p>生日：{% if user.birthday %}{{ user.birthday }}{% endif %}</p>
                <p>年龄：{% if user.age %}{{ user.age }}{% endif %}</p>
                <p>身份：{% if user.identity %}{{ user.identity }}{% endif %}</p>
                <p>注册时间：{{ user.createtime }} </p>
                <span>兴趣爱好：</span>
                <p>{% if user.hobbies %}{{ user.hobbies }}{% endif %}</p>
                <span>自我介绍：</span>
                <p>{% if user.introduce %}{{ user.introduce }}{% endif %}</p>

            </div>
        </div>
        <div class="button">
            {#            userinfo.js 文件中的函数 弹出或关闭编辑页面#}
            <button id="edit-info">编辑</button>
            <button id="change_pw_btn">修改密码</button>
        </div>
    </div>
{#    编辑信息弹出框#}
    <div>
        <div class="change-info" style="display: none">
            <div class="graybox"></div>
            <div class="popbox">
                <div class="infotop">
                    <div class="pay_title"><h3 id="pay_title_fun">编辑个人信息</h3></div>
                    <a href="#" class="close"></a>
                </div>
                <form method="post" action="{{ url_for('userinfo.info') }}">
                    <div class="group">
                        <label>姓名</label>
                        <input type="text" name="name"
                               value="{% if user.name %}{{ request.form['name'] or user.name }}{% endif %}" required
                               maxlength="20"
                               placeholder="姓名">
                        <br>
                        <label>性别</label>
                        <label class="radio-inline"><input class="inputradio" type="radio" name="gender" value="M" {% if user.gender == 'M' %}checked{% endif %}>男</label>
                        <label class="radio-inline"><input class="inputradio" type="radio" name="gender" value="F" {% if user.gender == 'F' %}checked{% endif %}>女</label>
                        <br>
                        <label>手机号</label>
                        <input type="tel" name="tel" value="{{ request.form['tel'] or user.tel }}" placeholder="手机号"
                               required pattern="[0-9]{11}" maxlength="11"
                               minlength="11"><br>
                        <label>邮箱地址</label>
                        <input type="email" name="email" value="{% if user.email %}
                                {{ request.form['email'] or user.email }}{% endif %}"
                               placeholder="email@mail.com" required><br>
                        <label>生日</label>
                        <input type="date" name="birthday" value="{{ request.form['birthday'] or user.birthday }}"
                        ><br>
                        <label>年龄</label>
                        <input type="number" name="age" required min="12" placeholder="年龄"
                               value="{{ request.form['age'] or user.age }}" max="200" pattern="[0-9]{11}"><br>
                        <label>学历</label>
{#                        <label classass="radio-inline"><input class="inputradio" type="radio" name="identity" checked alt="学生">学生</label>#}
{#                        <label class=class"radio-inline"><input class="inputradio" type="radio" name="identity" alt="教师">教师</label>#}
                        <select name="identity_">
                            <option {% if user.identity == '初中生' %}selected {% endif %}>初中生</option>
                            <option {% if user.identity == '高中生' %}selected {% endif %}>高中生</option>
                            <option {% if user.identity == '专科生' %}selected {% endif %}>专科生</option>
                            <option {% if user.identity == '本科生' %}selected {% endif %}>本科生</option>
                            <option {% if user.identity == '研究生' %}selected {% endif %}>研究生</option>
                            <option {% if user.identity == '博士生' %}selected {% endif %}>博士生</option>
                        </select><br>
                        <label><textarea class="hobbies" name="hobbies" placeholder="兴趣爱好">{% if user.hobbies %}{{ request.form['hobbies'] or user.hobbies }}{% endif %}</textarea></label><br>
                        <label><textarea class="introduce" name="introduce" placeholder="自我介绍">{% if user.introduce %}{{ request.form['introduce'] or user.introduce }}{% endif %}</textarea></label>
                    </div>
                    {% for message in get_flashed_messages() %}
                        <script>alert({{ message }})</script>
                    {% endfor %}
                    <div class="info">
                        <div class="button">
                            <button class="close" type="reset">取消</button>
                            <button class="success" type="submit">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{#    修改密码弹出框#}
    <div>
        <div class="change-pw" style="display: none">
            <div class="graybox"></div>
            <div class="popbox">
                <div class="infotop">
                    <div class="pay_title"><h3 id="pay_title_fun">修改密码</h3></div>
                    <a href="#" class="close"></a>
                </div>
                <form method="post" action="{{ url_for('userinfo.changePW') }}">
                    <div class="group">
                        <label>旧密码</label>
                        <input type="password" name="old_pw" placeholder="旧密码" required autocomplete="off"
                               autofocus><br>
                        <label>新密码</label>
                        <input type="password" name="new_pw" placeholder="新密码" required autocomplete="off"
                               minlength="6"><br>
                        <label>确认密码</label>
                        <input type="password" name="confirm_pw" placeholder="确认密码" autocomplete="off" required>
                    </div>
                    {% for message in get_flashed_messages() %}
                        <script>window.alert({{ message }})</script>
                    {% endfor %}
                    <div class="info">
                        <div class="button">
                            <button class="close" type="reset">取消</button>
                            <button class="success" type="submit">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}